Use :enable and :disable selectors via jQuery

Question

Aryan Kumar · Answer

In jQuery, you can use the prop() method to enable or disable form elements. Here's an example that shows how to use the
prop() method to enable and disable a button based on the value of a checkbox:
andlt;!DOCTYPE html>
andlt;html lang="en">
andlt;head>
  andlt;meta charset="UTF-8">
  andlt;meta name="viewport" content="width=device-width, initial-scale=1.0">
  andlt;title>Enable/Disable Selectors via jQueryandlt;/title>
  andlt;script src="https://code.jquery.com/jquery-3.6.4.min.js">andlt;/script>
andlt;/head>
andlt;body>
andlt;form>
  andlt;label for="enableCheckbox">Enable/Disable Buttonandlt;/label>
  andlt;input type="checkbox" id="enableCheckbox">
  andlt;button id="myButton" type="button">Click Me!andlt;/button>
andlt;/form>
andlt;script>
  $(document).ready(function() {
    // Initially, disable the button
    $('#myButton').prop('disabled', true);
    // Change the button state based on the checkbox
    $('#enableCheckbox').on('change', function() {
      // If the checkbox is checked, enable the button; otherwise, disable it
      $('#myButton').prop('disabled', !this.checked);
    });
  });
andlt;/script>
andlt;/body>
andlt;/html>
In this example:
The button (#myButton) is initially disabled using $('#myButton').prop('disabled', true);.The state of the button is changed based on the checkbox (#enableCheckbox) using the
change event. If the checkbox is checked, the button is enabled; otherwise, it is disabled.
You can adapt this example to your specific use case by adjusting the selectors and the conditions for enabling or disabling elements based on your application's requirements.

forum

Use :enable and :disable selectors via jQuery

Ethan Karla

Can you answer this question?

1 Answers

Liked By